// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Modal,Row,Col,Spin,Button,Icon,message,Input} from 'antd'
//导入路由组件，用于跳转等
// import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './talkMapStyle.less'
import moment from 'moment'
//引用listPage
import $ from 'jquery'
import cx from 'classnames'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'

import { Grid, QueryCondition } from 'widget/Grid'
import BaiduMap from 'widget/BaiduMap/BaiduMap'
import ListPage from 'widget/PageTmpl/ListPage'
const confirm = Modal.confirm;
import FlagBtn from 'widget/FlagBtn/FlagView'



/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  let { teamModal,selectedRowKeys,projectId,biz,loading,item,markers,polygonPath,queryList,markersGroup,mapType,pluginProps}  = modelObj
  //查询
  const onSearch = (payload) => {
    dispatch({
      type: `${namespace}/search`,
      payload: payload
    })
  }
  const style = {
    10:{//未到访
      color: '#7cba59',
      fontSize:'30px'
    },
    30:{//已到访
      color: '#1296db',
      fontSize:'30px'
    },
    80:{//已成交
      color: '#efb336',
      fontSize:'30px'
    },
    90:{//导入客户
      color: '#be8dbd',
      fontSize:'30px'
    }
  }
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      // api_url: "zituo-admin/a/map/findImportCustomer",
      api_url: `zituo-admin/a/map/findImportCustomerByFileName/${projectId}`,
      // 接口方式
      method: "POST",
      headers: {
        "Content-type": "application/json"
      },
      app: "",
      // 接口参数
      params: {
        pageSize:10,
        pageNo:1,
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      selectedRowKeys:'',
      // 查询栏
      search_bar: {
      },
      // 数据表格
      'table':
        {
          rowSelectionInfo: {
            type: 'checkbox',
          },
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: {x: 800},
          fields: [
            {
              en_name: "ruleNo",
              zh_name: "编号",
              width: 60,
              render: (a, item, index, d, e, f) => {
                return index+1
              },
            },
            {
              en_name: "userId",
              zh_name: "上传人",
            },
            {
              en_name: "fileName",
              zh_name: "文件名",
            },
            {
              en_name: "createTime",
              zh_name: "上传时间",
            },
            {
              en_name: "edit",
              zh_name: "操作",
              width:100,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                return (
                  <span>
                      <FlagBtn node={<a onClick={() => deleteContent(item)}>删除</a>} btnId={''}> </FlagBtn>
                  </span>
                )
              }
            }
          ],
        },
        action_bar: [
          {
            rowSelection: [],
            render: () => {
              return <Input hidden/>
            },
            onClick: (e, row) => {
            }
          },
        ]
    },
  }

  //删除
  function deleteContent(item){
      confirm({
        title: '删除确认',
        content: '您真的要删除此数据吗?',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          dispatch({
            type: `${namespace}/onDelete`,
            payload: {ids: item.fileName}
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });
  }
   //多数据删除
  function delFun(){
    if(!biz.selectedRows.length){
      message.warn('请先选择要删除的数据')
      return
    }
    let arr = []
    for(var item of biz.selectedRows){
      arr.push(item.fileName)
    }
    confirm({
      title: '删除确认',
      content: '您真的要删除此数据吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: `${namespace}/onDelete`,
          payload: {ids: arr.join(',')}
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }


  // 导出模板
  function downloadTemplate(){
    dispatch({
      type: `${namespace}/exportTemplate`,
      payload: {}
    })
  }
  // 导出数据
  function download(){
    dispatch({
      type: `${namespace}/exportList`,
      payload: {}
    })
  }
  //导入地图
  function importMap(e){
    dispatch({
      type: `${namespace}/upload`,
      payload: {e:e}
    })
  }
  function updateDelData(){
    if(!projectId){
      message.warn('请先选择区域下项目，再删除')
      return
    }
    teamModal.visible = !teamModal.visible
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {teamModal}
    })
  }

  function fileClick(){
    if(!projectId){
      message.warn('请先选择区域下项目，再导入')
      return
    }
    $('#file').click()
  }

  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }

  return (
    <div className='public_listMain' style={{background: ''}}> 
      <div className={"functionButton"}>
        <Button type='primary' onClick={e => downloadTemplate()}>拓客地图导入模板下载</Button>
        <div style={{display:'inline-block',height: '32px',lineHeight: '32px',background: '#0877fd',color: '#fff',borderRadius: '4px',padding: '0 10px',marginLeft: '14px',cursor: 'pointer'}}  onClick={() => fileClick()}>
           <span>拓客地图导入</span>
           <input type="file" id="file" accept=".xls,.xlsx" style={{display: 'none'}} onChange={(e) => importMap(e)}/>
       </div>
        <Button type='primary' onClick={e => download()}>导出</Button>
        <Button type='primary' onClick={e => updateDelData()}>删除导入数据</Button>
      </div>
       <AdvanceSearch
          footer={
            <span>
                <Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={loading}>搜索</Button>
                <Button onClick={() => dispatch({ type: `${namespace}/queryReset` })}>重置</Button>
              </span>
          }
        >
          <QueryCondition
            data={queryList}
            inputChange={(key, value) => dispatch({type: `${namespace}/inputChange`, payload: {key, value}})}
          />
        </AdvanceSearch>
      <div className={styles.iconType}>
        <label>未到访:<Icon style={style[10]} type="environment" theme="filled" /></label>
        <label>已到访:<Icon style={style[30]} type="environment" theme="filled" /></label>
        <label>已成交:<Icon style={style[80]} type="environment" theme="filled" /></label>
        <label>导入客户:<Icon style={style[90]} type="environment" theme="filled" /></label>
      </div>

      <div style={{width: '100%', height: '700px'}} >
          <BaiduMap
            visible = {true}
            markersData={markersGroup}
            heatmapData = {pluginProps.dataSet.data}
            mapType = {mapType}
          />
      </div>
      <Modal
          title="删除导入数据记录"
          visible={teamModal.visible}
          width='1000px'
          destroyOnClose={true}
          footer={false}
          onCancel={() => { updateDelData() }}
        >
        <div>
            <div style={{position: "relative"}}>
              <Button style={{position: "absolute",top:'-12px',right:0}} type="primary" onClick={() => delFun()} >删除</Button>
              <p style={{color: '#ff1e10'}}>注：删除上传记录，会把上传的客户单一同删除，请谨慎操作。</p>
            </div>
            <ListPage pageProps={pageProps}/>
        </div> 
    
      </Modal>
    </div>
    
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))
